<!-- 模板 -->
<template>
  <div class="home-root">
    <el-container>
      <!-- 1、导航头部 -->
      <el-header>
        <div class="left-box center-fx">
          <img src="../assets/logo1.jpg" alt="" />
          <span>我们不熟</span>
        </div>
        <div class="right-box center-fx">
          <span class="user-info">欢迎您:{{ username }}</span>
          <el-button type="primary" class="logo-out" @click="logout">退出</el-button>
        </div>
      </el-header>
      <!-- 2、主体 -->
      <el-container>
        <!-- 2-1、左侧边栏导航 -->
        <el-aside :width="isCollapse ? '0.64rem' : '2rem'">
          <!-- 点击折叠导航栏的按钮 -->
          <div class="collapse center-fx" @click="isCollapse = !isCollapse">|||</div>
          <!-- 导航栏列表 -->
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            background-color="#2c3e50"
            text-color="#fff"
            active-text-color="#ffd04b"
            :unique-opened="true"
            :collapse="isCollapse"
            :collapse-transition="false"
          >
            <!-- 
            el-menu：导航列表组件，是一个容器
            default-active：默认展开的列表序号
            unique-opened：每次只展开一个列表
           -->
            <el-submenu :index="index1 + ''" v-for="(item1, index1) in menuList" :key="index1">
              <!-- 
                el-submenu:一级菜单项
                index:每个菜单的序号，必须是字符串类型
              -->
              <template slot="title">
                <!-- 一级菜单项模板 -->
                <i :class="icons[item1.id + '']"></i>
                <!-- 一级菜单名称 -->
                <span>{{ item1.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item
                :index="item2.id + ''"
                @click="jumpToPage(item2.path)"
                v-for="(item2, index2) in item1.children"
                :key="index2"
              >
                <i class="el-icon-menu"></i>
                <span>{{ item2.authName }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 2-1、导航对应的内容主体，随着导航的变化而不同，默认的内容是欢迎页 -->
        <el-main>
          <!-- 二级路由导航的组件 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getUserInfo } from '../utils/getUserInfo.js'
import request from '../utils/request.js'
export default {
  name: 'Home',
  data() {
    return {
      //用户名
      username: 'admin',
      //导航列表
      menuList: [],
      //
      icons: {
        '125': 'iconfont icon-user',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-baobiao'
      },
      //判断当前的导航栏是否折叠
      isCollapse: false
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},

  methods: {
    /**
     * 1、退出登录
     * @date 2021-01-11
     */
    logout() {
      //1清空session
      sessionStorage.clear()
      //2、跳转到登录页
      this.$router.push('/login')
    },

    /**
     * 2、获得导航列表信息
     * @date 2021-01-11
     */
    async getMenuList() {
      let option = {
        url: 'menus',
        type: 'get'
      }
      let { data: res } = await request(option)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      //保存请求的数据到data中
      this.menuList = res.data
    },

    /**
     * 3、点击二级路径跳转到指定的组件
     * @date 2021-01-11
     * @param {any} route
     */
    jumpToPage(route) {
      this.$router.push('/' + route)
    }
  },
  created() {},
  mounted() {
    this.username = getUserInfo()
    this.getMenuList()
  }
}
</script>

<style lang="less" scoped>
.home-root {
  width: 12.55rem;
  .el-container {
    .el-header {
      background-color: black;
      color: #fff;
      display: flex;
      justify-content: space-between;
      .left-box {
        img {
          height: 0.5rem;
        }
        span {
          font-size: 0.18rem;
          font-family: 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei';
          margin-left: 0.1rem;
        }
      }
      .right-box {
        span {
          font-size: 0.18rem;
          font-family: 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei';
          margin-left: 0.1rem;
        }
        .el-button {
          margin-left: 0.1rem;
        }
      }
    }
    // 主体部分
    .el-container {
      min-height: 6rem;
      .el-aside {
        background-color: #2c3e50;
        color: #fff;
        .collapse {
          background-color: #4a5064;
          padding: 0.05rem;
          cursor: pointer;
        }
        .el-menu {
          border: none;
          .el-submenu {
            .iconfont {
              margin-right: 0.1rem;
            }
          }
        }
      }
    }
  }
}
</style>
